<template>
  <div>
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <!-- 左侧内容 -->
        <el-col>
          <el-button type="primary" size="small" @click="addBus">添加经纪</el-button>
        </el-col>
        <!-- 右侧内容 -->
        <el-col class="btn" type="flex" justify="end">
          <div style="margin-top: 15px;">
            <el-input v-model="list.name_contains" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="btnFn" />
            </el-input>
          </div>
        </el-col>

        <!-- 表格 -->
      </el-row>
      <el-row class="table">
        <el-table

          :data="tableData"
          border
          style="width: 100%"
        >
          <!-- 图片 -->
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template v-slot="{row}">
              <img :src="row.image" alt="" class="imgF">
            </template>
          </el-table-column>
          <!--名称  -->
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <!-- 邮箱 -->
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <!--电话  -->
          <el-table-column
            prop="phone"
            label="电话"
          />
          <!-- 地址 -->
          <el-table-column
            prop="address"
            label="地址"
          />
          <!-- 介绍 -->
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <!-- 操作 -->
          <el-table-column
            prop="operation "
            label="操作"
          >
            <template v-slot="{row}">
              <el-row>

                <span class="icon"> <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button></span>
                <span><el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button></span>

              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="height: 50px" align="middle">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="list._limit"
          @current-change="currentPage"
        />
      </el-row>

    </el-card>
    <Dialong ref="form" :dialog-visible.sync="dialogVisible" @updateData="getBusiness" />
  </div>
</template>

<script>
// 获取经纪列表 、添加经纪、删除
import { getBusiness, delBusiness, getNumber } from '@/api/business'
import Dialong from './components/dialong.vue'

export default {
  components: { Dialong },
  data() {
    return {

      tableData: [{}],
      dialogImageUrl: '',
      dialogVisible: false,
      userName: '',
      id: '',
      uu: '',
      list: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      }, // 承接数组
      // page: {
      total: 0
      // }

    }
  },
  async  created() {
    // 获取经纪列表
    this.getBusiness()
    this.total = await getNumber()
  },
  methods: {
    // 获取经纪列表
    async getBusiness() {
      this.tableData = await getBusiness(this.list)
      console.log(97, this.tableData)
    },
    // 添加经纪
    async addBus() {
      this.dialogVisible = true
      // this.id = id
      // 刷新数据
    },
    // 编辑经纪
    editFn(id) {
      console.log(id)
      this.dialogVisible = true
      // this.id = id

      // 调用子组件里面的方法
      this.$nextTick(() => {
        this.$refs.form.getEditById(id)
      })
    },
    // 删除经纪
    async delFn(id) {
      console.log(123, id)
      // 调用接口
      await delBusiness(id)
      // 刷新数据
      this.getBusiness()
    },
    // 分页
    currentPage(data) {
      console.log(data)
      this.list._start = (data - 1) * this.list._limit
      this.getBusiness()
    },
    // 搜索
    btnFn() {
      // this.list.name_contains = this.uu
      this.getBusiness(this.list)
    }
    // 搜索=

  }
}
</script>

<style lang="scss" scoped >
.btn {
  margin-top: -20px;
}
.table{
  margin-top: 20px;
}
.icon{
  margin-right: 15px;
}
.imgF {
  width: 100px;
  width: 200px;
  margin-left: -20px;
}
</style>

